<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令测试</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <div id ="root">
<!--
          需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
          需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
-->
    
        <h1>n的原始值是：{{n}}</h1>
        <h2>n被放大十倍后的值是:<span v-big="n"></span></h2>
        <button @click = "n++">点击n的值+1</button><br/>
        
        <input type="text" v-fbind:value = "n">让该输入框自动获取焦点</input>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#root",
            data: function(){
                return {
                    n: 0
                }
            },
            directives:{
                big:function(element,binding){
                    //element：绑定的dom节点，binding：绑定的对象
                    console.log(element,binding);
                    element.innerText = binding.value * 10
                    
                },
                // fbind:function(element,binding){
                //     element.value = binding.value
                //     element.focus() //初次进入页面不会获取焦点，因为此时dom元素还没有被放入页面。想办法获取一个中间状态，dom元素被放入页面之后再触发获取焦点的操作，
                // 直接写成函数相当于 bind和update结合。
                // }
                fbind:{
                    //指令和元素绑定成功触发
                    bind(element,binding){
                        element.value = binding.value
                    },
                    //dom元素被渲染到页面时触发
                    inserted(element,binding){
                        element.focus()
                    },
                    //指令所在模板被重新解析时
                    update(element,binding){
                        element.value = binding.value
                    }
                }
            }
        })
    </script>
    
</body>
</html>